// 人员签到

<template>
    <f7-page class="signin">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>人员签到</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <div class="content">
            <div class="map-box">
                <!-- <baidu-map id="mapContainer"
                           class="bm-view"
                           :center="center"
                           :zoom="zoom"
                           :map-click='false'
                           @ready="handler">
                    <bm-marker :position="position">
                    </bm-marker>
                </baidu-map> -->
                <tdt-map :center="center"
                         :zoom="zoom"
                         class="bm-view">
                    <tdt-marker :position="[position.lng,position.lat]"></tdt-marker>
                </tdt-map>
            </div>

            <div class="signin-box fff">
                <template v-if="inCircle">
                    <div @click="showPopupForm = true">
                        <div class="blue">签到打卡</div>
                    </div>
                    <section>
                        <img src="@/assets/img/sign/right.png"
                             alt=""><span>已进入打卡范围：{{controlData.engineeInfo.engineeName}}</span>
                    </section>
                </template>
                <template v-else>
                    <div>
                        <div class="gray">无法签到</div>
                    </div>
                    <section>
                        <img src="@/assets/img/sign/wang.png"
                             alt=""><span>不在签到范围内</span>
                    </section>
                </template>
            </div>
        </div>
        <van-popup class="popup-success-from"
                   v-model="showPopupForm"
                   round
                   position="bottom"
                   :style="{ height: '40%' }">
            <div class="remarks">
                打卡备注
            </div>
            <van-form>
                <van-field name="uploader"
                           label="拍照（选填）">
                    <template #input>
                        <f7-picture-upload :params="{type:'attach',dataKey: models.model.caseId, bizType:'sign'}"></f7-picture-upload>
                    </template>
                </van-field>
            </van-form>
            <van-button style="width: 80%"
                        round
                        type="info"
                        @click="clockIn">打卡</van-button>
        </van-popup>
        <van-popup class="popup-success-bhlock"
                   v-model="showPopupSuccess">
            <div class="popup-success">
                <img src="@/assets/img/sign/success.png"
                     alt="">
                <div>打卡成功</div>
                <f7-button @click="showPopupSuccess = false"
                           style="width: 50%;"
                           fill>确认</f7-button>
            </div>
        </van-popup>
        <v-signin-navbar :engineeId="engineeId"
                         :style="showPopupSuccess || showPopupForm ? 'z-index: 1' : ''"></v-signin-navbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/project/sign/getEntity'
        }
    }
    onInit () {
        this.context.engineeId = this.$params.engineeId
    }
    onAfterQuery (type, isSuccess, result) {
        if (!result.controlData.isPosition) {
            this.$f7.dialog.toast('请先进行项目定位');

        } else {
            this.context.tdposition = [result.controlData.engineeInfo.lngBd * 1, result.controlData.engineeInfo.latBd * 1]
            setTimeout(() => {
                this.vm.location()
            }, 50)
        }
        return result
    }
    mixin () {
        return {
            data () {
                return {
                    // baidu - map
                    map: '',
                    center: [114.13051, 30.62236],
                    zoom: 10,
                    position: {},
                    //
                    showPopupSuccess: false,
                    showPopupForm: false,
                    //
                    engineeId: '',
                    inCircle: false,
                    //controller
                    controlData: {
                        engineeInfo: {}
                    }
                }
            },
            computed: {
                tdposition () {
                    this.center = this.tdposition
                }
            },
            methods: {
                clockIn () {
                    this.$util.getPromise(`/project/sign/save`, { pageAction: 'create', model: this.models.model }).then(result => {
                        if (result.success) {
                            this.showPopupForm = false
                            this.showPopupSuccess = true
                        } else {
                            this.$f7.dialog.toast(result.message);
                        }
                    })
                },
                //baidu-map
                handler ({ BMap, map }) {
                    map.enableScrollWheelZoom(true);
                    // map.setMapStyle({
                    //     styleJson: styleJson
                    // });
                    this.map = map;
                },
                location () {
                    this.$f7.preloader.show();
                    this.$util.getCurrentPosition((pos) => {
                        // 拿到的定位数据
                        this.position = { lng: pos.coords.longitude * 1, lat: pos.coords.latitude * 1 }
                        this.center = [pos.coords.longitude, pos.coords.latitude]
                        let point_center = new T.LngLat(pos.coords.longitude, pos.coords.latitude)
                        this.getAddress(point_center)
                        console.log(this.getDistance(this.position, this.center), this.controlData.signScope.value * 1 / 1000)
                        if (this.getDistance(this.position, this.center) <= this.controlData.signScope.value * 1 / 1000) {
                            this.inCircle = true
                        }
                        this.$f7.preloader.hide();
                    })
                },
                getAddress (point) {
                    let geolocation = new T.Geocoder();
                    geolocation.getLocation(point, (pos) => {
                        this.models.model.address = pos.formatted_address
                    })
                },
                getDistance (point1, point2) {
                    // 经纬度转换成三角函数中度分秒形式
                    let radLat1 = point1.lat * Math.PI / 180
                    let radLat2 = point2[1] * Math.PI / 180
                    let radLng1 = point1.lng * Math.PI / 180
                    let radLng2 = point2[0] * Math.PI / 180
                    let diffLat = radLat1 - radLat2
                    let diffLng = radLng1 - radLng2
                    // 球面两点间距离公式
                    let distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(diffLat / 2), 2) +
                        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(diffLng / 2), 2)))
                    distance *= 6378.137 // 地球赤道半径
                    // 换算成公里数输出
                    distance = Math.round(distance * 10000) / 10000
                    return distance
                }

            }
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .tdt-control-container {
    display: none;
}
@deep: ~">>>";
.signin {
    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2;

        > div {
            flex: 1;
        }

        .signin-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            flex: 0.6;

            > div {
                > div {
                    width: 120px;
                    height: 120px;
                    border-radius: 100%;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                }
                .blue {
                    background-color: #3d89f6;
                    border: 4px solid #3d89f6;
                }
                .gray {
                    background-color: #afb6c7;
                    border: 4px solid #afb6c7;
                }
            }

            > section {
                padding: 10px;
                flex-shrink: 0;
                display: flex;
                justify-content: center;
                align-items: center;

                > span {
                    color: #888;
                }

                > img {
                    width: 24px;
                }
            }
        }
    }

    .submit-btn {
        flex: 1;
        margin: 0 10px;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
}
@{deep}.toolbar {
    // z-index: 1;
}
@{deep}.page-content {
    background-color: initial;
    .van-popup.popup-success-from {
        text-align: center;
    }
    .van-popup.popup-success-bhlock {
        width: 80%;
        border-radius: 16px;
        padding: 20px;
        .popup-success {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            > img {
                width: 200px;
            }
        }
    }
    .remarks {
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
    }
    .pic_upload {
        margin: 0;
    }
}
</style>
